<template>
  <el-container>
    <div style="width: 100% ;margin: 40px 40px;">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="filterData"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="账号" prop="username" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>

        <el-table-column label="姓名" prop="nickname" align="center">
          <template slot-scope="scope">
            <el-input v-if="scope.row.edit == 'edit'" v-model="scope.row.nickname" class="edit-input" size="small" />
            <span v-else>{{ scope.row.nickname }}</span>
            <!--<span>{{ scope.row.nickname}}</span>-->
          </template>
        </el-table-column>

        <el-table-column label="手机号" prop="phone" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" prop="createDate" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createDate | userDate }}</span>
          </template>
        </el-table-column>

        <el-table-column label="所属部门" prop="areaName" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.dep }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户状态" prop="status" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == 1?'success':'danger'" class="el-status" @click="changeStatus(scope.row)">{{ scope.row.status | userStatus }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="280"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.edit == 'edit'"
              type="success"
              size="small"
              icon="el-icon-circle-check-outline"
              @click="confirmEdit(scope.row)"
            >确认</el-button>
            <el-button
              v-if="scope.row.edit != 'edit'"
              type="primary"
              size="small"
              icon="el-icon-edit"
              @click="editName(scope.row)"
            >编辑信息</el-button>
            <el-button type="danger" size="mini" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <el-row>
        <el-col :span="24">
          <div class="pagination">
            <el-pagination
              v-if="paginations.total > 0"
              :page-size="paginations.page_size"
              :layout="paginations.layout"
              :total="paginations.total"
              :current-page.sync="paginations.page_index"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
      </el-row>
    </div>

  </el-container>
</template>
<script>
import { getOrgTree, saveOrg, delOrgData } from '@/api/user'
export default {
  filters: { // 局部过滤器
    userStatus: (s) => {
      return s == 1 ? '启用' : '禁用'
    },
    userDate: (date) => {
      const d = new Date(date)
      return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds()
    }
  },
  data() {
    return {
      listLoading: false,
      tableKey: 0,
      paginations: {
        page_index: 1, // 当前位于哪页
        total: 0, // 总数
        page_size: 10, // 1页显示多少条
        layout: 'total,prev, pager, next '// 翻页属性
      },
      filterData: [],
      saveData: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.filterData = [
        {
          'username': 'admin',
          'nickname': 'Jane',
          'phone': '18402554852',
          'createDate': '2018-02-02 12:30:00',
          'dep': '开发部',
          'role': 'admin',
          'status': 1,
          'enabled': 1
        },
        {
          'username': 'user',
          'nickname': 'Jay',
          'phone': '18402551140',
          'createDate': '2018-02-02 12:30:00',
          'dep': '测试部',
          'role': 'admin',
          'status': 1,
          'enabled': 1
        }
      ]
      this.paginations.total = this.filterData.length
    },
    editName(data) {
      // 没有修改提交 或者没有提交成功还原数据
      this.saveData = data.nickname
      data.edit = 'edit'
      this.$set(data, 'edit', 'edit')
    },
    confirmEdit(data) {
      if (data.nickname != '') {
        // 接口提交数据
        data.edit = ''
        // vue 缓存不会主动更新对象的属性
        this.$set(data, 'edit', '')
        this.$message({
          message: '修改成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: '请输入名称',
          type: 'error'
        })
      }
    },
    handleCurrentChange(page) {}
  }
}

</script>
<style scoped >
  .slot-tree{
    width: 100%;
    height: 80%;
    margin: 0 auto;
  }
  /*顶部按钮*/
  .slot-tree .slot-t-top{
    margin-bottom: 15px;
  }
  .slot-tree .slot-t-node span{
    display: inline-block;
  }
  /*节点*/
  .slot-tree .slot-t-node--label{
    font-weight: 600;
  }
  /*输入框*/
  .slot-tree .slot-t-input .el-input__inner{
    height: 26px;
    line-height: 26px;
  }
  /*按钮列表*/
  .slot-tree .slot-t-node .slot-t-icons{
    display: none;
    margin-left: 10px;
  }
  .slot-tree .slot-t-icons .el-button+.el-button{
    margin-left: 6px;
  }
  .slot-tree .el-tree-node__content:hover .slot-t-icons{
    display: inline-block;
  }
  .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 100;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);

  }
  .contextmenu li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
  }
  .contextmenu li:hover {
    background: #eee;
  }
.pagination{
  text-align: right;
  margin-top: 10px;
}
</style>
